<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>成都景润九州旅游规划设计有限责任公司</title>

    <!--默认样式-->
    <link rel="stylesheet" href="/css/reset.css">

    <!--响应式框架-->
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">

    <!--css3动画库-->
    <link rel="stylesheet" href="/css/animate.css">

    <!--banner大图基础样式-->
    <link rel="stylesheet" href="/css/slick.css">

    <!--页面滚动基础样式-->
    <link rel="stylesheet" href="/css/jquery.fullPage.css"/>

    <!--导航样式-->
    <link rel="stylesheet" href="/css/head.css"/>

    <!--图片和滚屏样式-->
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/style.css"/>
    <link rel="stylesheet" href="/css/jdal.css"/>


</head>

<body>
<!-- 导航 -->
<header class="header">
    <div class="container clearfix">
        <div class="fl left">
            <a href="javascript:void(0)"><img src="/images/index_2.png" alt="" class="img1" /></a>
            <a href="javascript:void(0)"><img src="/images/index_logo.png" alt="" class="img2" /></a>
        </div>
        <div class="fr nav">
            <ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp">
                <li class="active">
                    <a href="/" class="dh">首页</a>
                </li>
                <li class="dropdown">
                    <a href="/ts/fulx.html" class="dh">
                        服务类型
                    </a>
                    <div class="dropdown_menu">
                        <a href="/ts/fulx.html">乡村振兴</a>
                        <a href="/ts/fulx-lygh.html">旅游规划</a>
                        <a href="/ts/fulx-qyly.html">农旅规划</a>
                        <a href="/ts/fulx-slgy.html">森林公园</a>
                        <a href="/ts/fulx-xywh.html">校园文化 </a>
                        <a href="/ts/fulx-tsxz.html">特色小镇</a>
                        <a href="/ts/fulx-jqca.html">景区创A</a>
                        <a href="/ts/fulx-jgjz.html">景观建筑</a>
                        <a href="/ts/fulx-bpds.html">标牌雕塑</a>

                    </div>
                </li>
                <li>
                    <a href="/ts/jdal.html" class="dh">经典案例</a>
                </li>

                <li class="dropdown">
                    <a href="/ts/ssdt.html" class="dh">实时动态</a>
                    <div class="dropdown_menu">
                        <a href="/ts/ssdt.html">企业动态</a>
                        <a href="/ts/hyjj.html">行业聚焦</a>
                        <a href="/ts/zpfb.html">招聘发布</a>
                    </div>
                </li>
                <li>
                    <a href="/ts/wyly.html" class="dh">我要留言</a>
                </li>
                <li class="dropdown">
                    <a href="/ts/gywm.html" class="dh">关于我们</a>
                    <div class="dropdown_menu">
                        <a href="/ts/gywm.html">公司简介</a>
                        <a href="/ts/qywh.html">企业文化</a>
                        <a href="/ts/ryzz.html">荣誉资质</a>
                        <a href="/ts/zjtd.html">专家团队</a>
                    </div>
                </li>
            </ul>
        </div>
        <a href="javascript:void(0)" id="navToggle">
            <span></span>
        </a>
    </div>
</header>
<!--移动端的导航-->
<div class="m_nav">
    <div class="top clearfix">
        <img src="/images/closed.png" alt="" class="closed" />
    </div>
    <ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">
        <li class="active">
            <a href="/">首页</a>
        </li>
        <li class="dropdown">
            <a href="#">
                服务类型
            </a>
            <div class="dropdown_menu">
                <a href="/ts/fulx.html">乡村振兴</a>
                <a href="/ts/fulx-lygh.html">旅游规划</a>
                <a href="/ts/fulx-qyly.html">农旅规划</a>
                <a href="/ts/fulx-slgy.html">森林公园</a>
                <a href="/ts/fulx-xywh.html">校园文化 </a>
                <a href="/ts/fulx-tsxz.html">特色小镇</a>
                <a href="/ts/fulx-jqca.html">景区创A</a>
                <a href="/ts/fulx-jgjz.html">景观建筑</a>
                <a href="/ts/fulx-bpds.html">标牌雕塑</a>

            </div>
        </li>
        <li>
            <a href="/ts/jdal.html">经典案例</a>
        </li>

        <li class="dropdown">
            <a href="#">实时动态</a>
            <div class="dropdown_menu">
                <a href="/ts/ssdt.html">企业动态</a>
                <a href="/ts/hyjj.html">行业聚焦</a>
                <a href="/ts/zpfb.html">招聘发布</a>
            </div>
        </li>
        <li>
            <a href="/ts/wyly.html">我要留言</a>
        </li>
        <li class="dropdown">
            <a href="#">关于我们</a>
            <div class="dropdown_menu">
                <a href="/ts/gywm.html">公司简介</a>
                <a href="/ts/qywh.html">企业文化</a>
                <a href="/ts/ryzz.html">荣誉资质</a>
                <a href="/ts/zjtd.html">专家团队</a>
            </div>
        </li>

    </ul>
</div>


<!--顶部图片-->
<img src="/images/lb4.jpg" class="img-responsive  dbtp"/>
<div class="jdal ">
    <p class="text-muted text-center ">Classic cases</p>
    <h3 class="text-center col-xs-12 ">经典案例</h3>
    <div class="hr1"></div>
</div>

<div class="container">
    <div id="jdalnews" class="row-jdal">

        <!--这里将会动态插入经典案例-->

    </div>


</div>
<!--分页-->
<div class="fyhz" style="text-align: center">
    <ul id="fenye" class=" fy pagination">

    </ul>
</div>

<!--底部footer-->
<div id="footer" class=" footer navbar-fixed-bottom ">

    <div class="fphone clo-xs-12 col-sm-12">
        <span><img src="/images/ico-fTel.png" alt="" class="icoImg " /><a href="tel:02887785218">028-8778-5218</a> </span> &nbsp;&nbsp;/&nbsp;&nbsp;
        <span><img src="/images/ico-fMob.png" alt="" class="icoImg " /><a href="tel:18030579518">18030579518</a> </span>
    </div>
    <img src="/images/wxtp.jpg" class="img-responsive hidden-xs" style="height: 150px; width: 150px; float: right;margin-top: 2.5vh;margin-right: 15vw;"/>


    <div class="fNav col-xs-12 col-sm-12">
        <a href="/" class="link aftl" rel="nofollow">网站首页</a>
        &nbsp;/&nbsp;
        <a href="/ts/gywm.html" class="link aftl" rel="nofollow">关于我们</a>
        &nbsp;/&nbsp;
        <a href="/ts/ssdt.html" class="link aftl" rel="nofollow">实时动态</a>
        &nbsp;/&nbsp;
        <a href="/ts/qywh.html" class="link aftl" rel="nofollow">企业文化</a>
        &nbsp;/&nbsp;
        <a href="/ts/fulx.html" class="link aftl">服务类型</a>
        &nbsp;/&nbsp;
        <a href="/ts/jdal.html" class="link aftl" rel="nofollow">经典案例</a>

    </div>

    <div class="babh col-xs-12 col-sm-12">
        备案编号：蜀ICP备16010011号-1
    </div>

</div>


<script type="text/javascript" src="/js/jquery-3.3.1.js" ></script>
<script type="text/javascript" src="/js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/jquery.fullPage.min.js"></script>
<script type="text/javascript" src="/js/index_slick.js"></script>
<script type="text/javascript" src="/js/index.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/loadfenye.js"></script>
<script type="text/javascript" src="/js/loadshuaxin.js"></script>
<script type="text/javascript" src="/js/skipvalue.js"></script>
<script type="text/javascript">

    //定义当前加载页面页数,初始化默认为1
    var pagei = 1;
    //定义当前加载页面内容条数
    var contentnum = 12;

    //加载内容
    loadcontent(pagei,contentnum);

    function loadcontent(pagei,contentnum) {
        $.ajax({
            type:"get",
            url:"/classicCase/getClassicList",
            contentType: "application/json;charset=utf-8",
            dataType: 'json',
            data:{currPage:pagei,pageSize:contentnum},
            success: function (data) {

                //加载前清空div中的内容
                $("#jdalnews").empty();

                for (i = 0;i < contentnum && i < data.datas.length; i++) {

                    //控制name字数显示
                    var name = data.datas[i].name;
                    if(name.length > 14){
                        name = name.substring(0,13) + "...";
                    }

                    var jdaldiv = document.createElement("div");
                    jdaldiv.id = data.datas[i].classicId;
                    jdaldiv.className = "col-xs-6 col-sm-4 jdal-jgg";
                    jdaldiv.innerHTML = "<img id='div2' src='" + data.datas[i].img + "' class='img-responsive' alt='Cinque Terre '/>" +
                        "<a class='jdal-bt'>" + name + "</a>" +
                        "<a href='#'>" +
                        "<div class='mask-jdal'>" +
                        "<img class='zhezhao' src='/images/黑色.jpg'/>" +
                        "</div>" +
                        "</a>";
                    document.getElementById("jdalnews").appendChild(jdaldiv);
                    //给创建的div添加点击事件
                    document.getElementById(data.datas[i].classicId).addEventListener("click",function(){classic(this)});
                }

                var o = document.getElementById("div2");
                var w = o.clientWidth || o.offsetWidth;
                var h = o.clientHeight || o.offsetHeight;

                var zhezhao = document.getElementsByClassName("zhezhao");
                for (var i = 0; i < zhezhao.length; i++) {
                    zhezhao[i].style.height = h + "px";
                    zhezhao[i].style.width = w + "px";
                }

                //分页加载
                var pagemax = Math.ceil(data.page.total/contentnum);
                loadfenye(pagei,pagemax);
            },
            error: function (res) {
                console.log(res.readyState + "  " + res.responseText);
                alert("请求失败！");
            }
        });
    };


</script>


</body>

</html>